import React, { useState, useEffect, useRef, Suspense } from 'react';
import { Link, Outlet } from 'react-router-dom';
import { Carousel, Button } from 'antd';
import { cloneDeep } from 'lodash';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { queryBannerList } from '../services/common';
import styles from './UserLayout.module.less';
import CommonLoading from '@/components/CommonLoading';
import ErrorBoundary from './ErrorBoundary';
import "@/assets/css/global.less";

const contentStyle = {
	margin: 0,
	height: '100%',
	color: '#fff',
	textAlign: 'center',
};

const UserLayout = () => {
	const carouselEL = useRef(null);
	const [bannerList, setBannerList] = useState([]);

	useEffect(() => {
		getBannerList();
	}, []);

	//获取bannerlist
	const getBannerList = async () => {
		const { success, data = {} } = await queryBannerList({
			isUp: 1,
		});
		const { records = [] } = data;
		if (success) {
			if (records.length > 0) {
				const arr = cloneDeep(records);
				arr.sort(function () {
					//对返回数据每次进行随机排序
					return Math.random() - 0.5;
				});
				setBannerList(arr);
			} else {
				setBannerList([{
					id: '1',
					imageUrl: 'https://imgniu.zhaojiafang.com/front-web/ERP/defaultLunBo.png',
				}])
			}
		}
	};

	//点击banner
	const handleBannerGo = (item) => {
		if (item.skipType == 1) {
			const reg = /^(http|https)/;
			if (reg.test(item.skipUrl)) {
				window.open(item.skipUrl);
			} else {
				window.open(`${window.location.protocol}//${item.skipUrl}`);
			}
		} else if (item.skipType == 2) {
			window.open(
				`${window.location.origin}/#/blank/articleContent?id=${item.id}`
			);
		}
	};

	const footer = APP_TITLE == '找家纺' ? (
		<div className={styles.footerBox}>
			<p style={{ marginRight: '48px' }}>苏ICP备19064293号</p>
			<p style={{ marginRight: '48px' }}>
				增值电信业务经营许可证 苏B2-20190966
			</p>
			<p>
				© 2019-{new Date().getFullYear()} 南通云尚找家纺电子商务有限公司
				版权所有
			</p>
		</div>
	) 
	: 
 (
		<div className={styles.footerBox}>
			<a
				target="blank"
				href="https://beian.miit.gov.cn/#/Integrated/index"
				style={{ marginRight: '48px', color: '#fff' }}
			>
				苏ICP备2023016097号-1
			</a>
			{/* <p style={{ marginRight: '48px' }}>
        增值电信业务经营许可证 苏B2-20190966
      </p> */}
			<p>© {new Date().getFullYear()}~ 常熟纺支宝科技有限公司 版权所有</p>
		</div>
	);

	return (
		<ErrorBoundary>
			<div className={styles.container}>
				<div className={styles.content}>
					<div className={styles.carousel}>
						{
							bannerList.length > 1 && (<>
								<Button
									className={styles.leftButton}
									style={{ left: 55 }}
									onClick={() => {
										carouselEL.current.prev();
									}}
									icon={<LeftOutlined />}
								></Button>
								<Button
									className={styles.rightButton}
									style={{ right: 55 }}
									onClick={() => {
										carouselEL.current.next();
									}}
									icon={<RightOutlined />}
								></Button>
							</>)
						}
						<Carousel
							speed={1000}
							dots={false}
							pauseOnHover={false}
							autoplay
							autoplaySpeed={5000}
							ref={carouselEL}
						>
							{bannerList.length > 0 &&
								bannerList.map((item) => {
									return (
										<a style={contentStyle} key={item.id}>
											<img
												onClick={() => {
													handleBannerGo(item);
												}}
												style={{ width: '100%', height: '100%' }}
												key={item.id}
												src={item.imageUrl}
											/>
										</a>
									);
								})}
						</Carousel>
					</div>
					<div className={styles.contentLogin}>
						<div className={styles.top}>
							<div className={styles.header}>
								<Link to="/">
									<span className={styles.title}>{APP_TITLE}ERP</span>
								</Link>
							</div>
						</div>
						<Suspense fallback={<CommonLoading loading={true} />} >
							<Outlet />
						</Suspense>
					</div>
				</div>
				{footer}
			</div>
		</ErrorBoundary>
	);
};

export default UserLayout
